<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="./include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>机构登录</title>
    <%@include file="./include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/ui/partner_login.css">
    <link rel="stylesheet" href="${ctx}/css/common/layout.css">
    <style>
        .register-wrap {
            width: 350px !important;
            height: 480px !important;
            top: 120px !important;
        }

        .register-wrap .login-ctn {
            padding-top: 10px !important;
        }

        .register-wrap .layui-form-item {
            margin-bottom: 5px !important;
        }

        .register-wrap .layui-input-inline {
            width: 220px !important;
        }

        .register-wrap .login-btn {
            width: 200px !important;
            padding: 0px !important;
            font-size: 21px !important;
            display: block !important;
        }

        body {
            min-width: 1200px;
        }

        .login-header {
            min-width: 1200px;
        }

        .login-inner-box {
            background: none;
        }

        .banner-container {
            min-height: 700px;
        }

        .banner-container .banner-bg {
            min-height: 700px;
        }

        @media screen and (max-width: 1300px) {
            .login-inner-box {
                width: 1100px;
            }
        }

        /*Chrome浏览器去箭头*/
        input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0px;
        }

        /*Firefox浏览器去箭头*/
        input[type="number"] {
            -moz-appearance: textfield;
        }

        .partner-img {
            background: url(${ctx}/image/login/banner1.png) center;
            height: 700px;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="login-header">
    <header>
        <div class="hd-inner">
            <a class="m-logo" href="${ctx}"> <img title="同行者" alt="同行者" src="${ctx}/image/index/logo.png"/>
            </a>
        </div>
    </header>
    <div class="banner-container">
        <div class="banner-bg-blur" style="background-image: url(${ctx}/image/login/banner1.png)"></div>
        <div class="partner-img"></div>
        <div class="login-inner-box">
            <div class="login-wrap qr-show" id="login_ctn" style="display: none">
                <div class="tabs">
                    <a class="tab-itm" data-ctn="login-ctn" href="javascript:void(0)" id="account_login">账户登录</a>
                </div>
                <div class="tab-body login-ctn">
                    <form id="login_from" class="layui-form my-form" method="post">
                        <div class="form-itm">
                            <label><i class="iconfont icon-peoplefill"></i></label>
                            <input type="text" placeholder="账号" name="loginName" lay-verify="loginName" autocomplete="off">
                        </div>
                        <div class="form-itm">
                            <label><i class="iconfont icon-lockfill"></i></label>
                            <input type="password" name="password" placeholder="密码" lay-verify="password" autocomplete="off">
                        </div>
                        <a class="db mb10 tr" id="forget_pwd_btn" href="javascript:void(0)">忘记密码</a>
                        <a class="login-btn" id="login_btn" href="javascript:void(0)" lay-submit
                           lay-filter="login-form">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
                        <div style="height: 2px"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 找回密码 -->
    <div class="f-def-dialog" id="forget_pwd_dialog">
        <div class="f-dialog-shadow"></div>
        <div class="f-dialog-content" style="height: auto;">
            <span class="close-icon"><i class="iconfont icon-close"></i></span>
            <div class="dialog-header">
                <span class="title">找回密码</span>
            </div>
            <div class="dialog-detail" style="width: 370px">
                <!-- 找回密码 -->
                <form id="findpwd_form" class="layui-form" method="post">
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="text" name="mobile" lay-verify="mobile" id="phone" autocomplete="off"
                                   onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                                   oninput="if(value.length>11)value=value.slice(0,11)"
                                   placeholder="请输入手机号码" class="layui-input l" is_verify_phone="true"
                                   is_register="false">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="text" id="imgCode" lay-verify="imgCode" autocomplete="off"
                                   placeholder="请输入右侧图片内容"
                                   class="layui-input l" style="width: calc(100% - 120px);">
                            <img width="100" src="" alt="" id="code_img" style="height: 36px; width: 110px;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="text" name="verifyCode" id="verify_code" lay-verify="verifyCode"
                                   autocomplete="off"
                                   placeholder="请输入手机验证码" class="layui-input l" style="width: calc(100% - 120px);">
                            <button id="code" type="button" class="layui-btn layui-btn-primary"
                                    style="width: 110px!important">发送验证码
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="password" class="layui-input" name="password" lay-verify="password1"
                                   placeholder="请输入新密码"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="password" class="layui-input" name="repassword" lay-verify="repassword"
                                   placeholder="请再次输入确认密码"/>
                        </div>
                    </div>
                    <button type="button" class="layui-btn layui-btn-danger login-btn" lay-submit
                            lay-filter="findpwd-form">
                        重置密码
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary login-btn" id="reset_cancel_btn">取消
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 合作伙伴 -->
<%@include file="./include/partner.jsp" %>

<!--底部-->
<%@include file="./include/footer1.jsp" %>
<script type="text/javascript" src="${ctx}/script/common/v_code.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/jquery.qrcode/jquery.qrcode.min.js"></script>
<script>
    var storage = localStorage;
    var clickType = storage.getItem('clickType') || '';
    var intervalArray = [];
    var errorDesciption = '', errorLgToken = '';
    $(function () {

        $('#login_ctn .' + $('#account_login').data('ctn')).addClass('show')

        if (clickType == 'register_btn') {
            storage.removeItem('clickType');

            $("#login_ctn").hide();
            Vcode.params = {
                countdown: 60,
                tempCountdown: 60,
                vCode: '#verify_code_rg',
                vPhone: '#mobileRg',
                vImgCode: '#imgCodeRg',
                vGetCodeBtn: '#codeRg',
                vCodeImg: '#code_img_rg',
                vImgContent: null || '#img_code_li',
                vLayer: null,
                vMemberType: 2
            };
            Vcode.addEvent();

            $("#register_ctn").show();
        } else {
            $("#register_ctn").hide();
            $("#login_ctn").show();
        }

        $("#findpwd_form").find(":input").each(function (index, ele) {
            $(ele).attr('autocomplete', 'off');
        })

        $('#forget_pwd_btn').click(function () {
            $('#forget_pwd_dialog').fadeIn();
            Vcode.params = {
                countdown: 60,
                tempCountdown: 60,
                vCode: null || '#verify_code',
                vPhone: null || '#phone',
                vImgCode: null || '#imgCode',
                vGetCodeBtn: null || '#code',
                vCodeImg: null || '#code_img',
                vImgContent: null || '#img_code_li',
                vLayer: null,
                vMemberType: 2
            };
            Vcode.addEvent();
        });
        $('#now_register').click(function () {
            loginApp.clearInterval();
            $("#login_ctn").hide();
            Vcode.params = {
                countdown: 60,
                tempCountdown: 60,
                vCode: '#verify_code_rg',
                vPhone: '#mobileRg',
                vImgCode: '#imgCodeRg',
                vGetCodeBtn: '#codeRg',
                vCodeImg: '#code_img_rg',
                vImgContent: null || '#img_code_li',
                vLayer: null,
                vMemberType: 2,
                vRoleName: 'partner'
            };
            Vcode.addEvent();

            $("#register_ctn").show();
        });

        $("#now_login").click(function () {
            $("#register_ctn").hide();
            $("#login_ctn").show();
            loginApp.makeQRCode();
        });

        // 回车登录
        $("#login_from").keydown(function (e) {
            var e = e || event, keycode = e.which || e.keyCode;
            if (keycode == 13) {
                $("#login_btn").trigger('click');
            }
        });
        $("#reset_cancel_btn,.f-def-dialog .close-icon").click(function () {
            $(this).closest('.f-def-dialog').fadeOut();
            Vcode.unBind()
        });
    })
    layui.use(['form'], function () {
        var form = layui.form;
        form.verify({
            loginName: function (value) {
                if (!util.isValid(value)) {
                    return "登录名不能为空";
                }
            },
            password: function (value) {
                if (!util.isValid(value)) {
                    return "登录密码不能为空";
                }
            },
            mobile: function (value) {
                if (!util.isValid(value)) {
                    return "请输入手机号码";
                } else if (!util.checkMobile(value)) {
                    return "手机号码格式不正确";
                }
            },
            verifyCode: function (value) {
                if (value == "") {
                    return "请输入手机验证码";
                }
                if (value.length > 10) {
                    return "图片验证码不正确";
                }
            },
            password1: function (value) {
                if (value == "") {
                    return "密码不能为空";
                } else if (!util.checkPassword(value)) {
                    return "密码格式不正确,正确格式:包含数字和字母且在6-20位";
                }
            },
            repassword: function (value) {
                var pwd = $("#findpwd_form").find("[name=password]").val();
                if (value == "") {
                    return "确认密码不能为空";
                } else if (!util.checkPassword(value)) {
                    return "确认密码格式不正确,正确格式:包含数字和字母且在6-20位";
                } else if (pwd != value) {
                    return "确认密码与新密码不匹配";
                }
            },
            imgCode: function (value) {
                if (value == "") {
                    return "请输入右侧图片内容";
                }
            },
            mobileRg: function (value) {
                if (!util.isValid(value)) {
                    return "请输入手机号码";
                } else if (!util.checkMobile(value)) {
                    return "手机号码格式不正确";
                } else if (value != "" && util.checkMobile(value)) {
                    var isRepeat = txz.checkGroupIsUnique('mobile', value, '', 2, 'partner');
                    if (undefined == isRepeat) {
                        return "验证手机号异常";
                    } else if (isRepeat) {
                        return "手机号已存在";
                    }
                }
            },
            usernameRg: function (value) {
                if (!util.isValid(value)) {
                    return "登录名不能为空";
                }
                if (!util.checkEmail(value) && !util.checkUserName(value)) {
                    return "登录名可以是邮箱或只能以字母开头、可带数字、@和下划线,长度不能大于20";
                } else {
                    var isRepeat = txz.checkGroupIsUnique('username', value, '');
                    if (undefined == isRepeat) {
                        return "验证用户名异常";
                    } else if (isRepeat) {
                        return "登录名已存在";
                    }
                }
            },
            passwordRg: function (value) {
                if (value == "") {
                    return "密码不能为空";
                } else if (!util.checkPassword(value)) {
                    return "密码格式不正确,正确格式:包含数字和字母且在6-20位";
                }
            },
            repasswordRg: function (value) {
                var pwd = $("#register_form").find("[name=passwordRg]").val();
                if (value == "") {
                    return "确认密码不能为空";
                } else if (!util.checkPassword(value)) {
                    return "确认密码格式不正确,正确格式:包含数字和字母且在6-20位";
                } else if (pwd != value) {
                    return "确认密码与新密码不匹配";
                }
            },
            checkedRg: function () {
                if (!$("#u38_input").is(':checked')) {
                    return "请您阅读并同意《同行者服务协议》方可注册";
                }
            }
        });

        // 登录
        form.on('submit(login-form)', function (data) {
            txz.submitObject(data.elem, function (callBack) {
                $.post('${ctx}/user/login/login.do', $('#login_from').serialize(), function (res) {
                    typeof callBack === 'function' && callBack();
                    if (res.success) {
                        location.href = "${ctx}" + res.description;
                    } else {
                        util.layerMsgError(res.description);
                        console.log(res.description);
                    }
                });
            });
            return false;
        });

        // 找回密码
        form.on('submit(findpwd-form)', function (data) {
            var newData = data;
            Vcode.checkCode(cb(newData));

            function cb(data) {
                $(data.elem).removeAttr("lay-submit");
                txz.ajaxRequest({
                    url: '${ctx}/user/login/resetPassword.do',
                    type: 'POST',
                    async: false, // 使用同步的方法
                    params: $('#findpwd_form').serialize(),
                    callBack: function (res) {
                        if (res.success) {
                            util.layerMsgSuccess('密码重置成功', function () {
                                location.reload();
                            });
                        } else {
                            $(data.elem).attr("lay-submit", "");
                            util.layerMsgError(res.description);
                        }
                    }
                })
            }
        });
        //注册
        form.on('submit(register_form)', function (data) {
            //loading层
            var loadIndex = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });

            var newData = data;
            Vcode.checkCode(cb(newData));

            function cb(data) {
                $(data.elem).removeAttr("lay-submit");
                txz.ajaxRequest({
                    url: '${ctx}/user/register/partnerRegister.do',
                    type: 'POST',
                    async: false, // 使用同步的方法
                    params: $('#register_form').serialize(),
                    callBack: function (res) {
                        layer.close(loadIndex);
                        if (res.success) {
                            util.layerMsgSuccess('注册成功，请登录', function () {
                                location.reload();
                            });
                        } else {
                            $(data.elem).attr("lay-submit", "");
                            util.layerMsgError(res.description);
                        }
                    }
                })
            }
        });
    });

    var lgToken;
    var loginApp = {
        bind: function () {
            // $('#partner_login_btn').click(function () {
            //     $('#login_ctn').fadeIn()
            //     loginApp.makeQRCode()
            // })
            $('#app_name_link').mouseover(function () {
                $('.app-qr-wrap .app-qr').show()
            }).mouseout(function () {
                $('.app-qr-wrap .app-qr').hide()
            })
            $('.refresh-qr').click(function () {
                loginApp.makeQRCode()
            })
            $('.tab-itm').click(function () {
                loginApp.changeTabs(this)
            })
        },
        changeTabs: function (o) {
            $('#login_ctn .tab-itm.sel').removeClass('sel')
            $(o).addClass('sel')
            $('#login_ctn .tab-body.show').removeClass('show')
            $('#login_ctn .' + $(o).data('ctn')).addClass('show')

            var id = $(o).attr('id');
            if (id === 'account_login') {
                loginApp.clearInterval()
            } else if (id === 'scan_login') {
                loginApp.makeQRCode();
            }
        },
        // 生成二维码
        makeQRCode: function () {
            $('#scan_stat').hide()

            $.post('${ctx}/user/scanLogin/generateQRCodeLogin.do', {}, function (res) {
                if (res.success) {
                    // $("#login_qr").attr('src', res.data.qrcodeUrl);
                    $('#login_qr').qrcode({
                        width: 150,
                        height: 150,
                        render: "canvas",
                        text: res.data.content
                    });
                    lgToken = res.data.lgToken;
                    var quartzId = setInterval(function () {
                        loginApp.checkQRCode();
                    }, 2000);
                    intervalArray.push(quartzId);
                } else {
                    util.layerMsgError(res.description);
                }
            });
        },
        // 检查二维码
        checkQRCode: function () {
            $.post('${ctx}/user/scanLogin/checkQRCodeStatus.do', {lgToken: lgToken}, function (res) {
                if (!res.success) {
                    loginApp.showScanErr();

                    for (var i = 0; i < intervalArray.length; i++) {
                        clearInterval(intervalArray[i]);
                    }

                    if (res.errorCode && lgToken != errorLgToken) {
                        errorLgToken = lgToken;
                        console.log(lgToken + '---' + res.description)
                        util.layerMsgError(res.description);
                    }
                } else {
                    switch (res.data.code) {
                        case 10001:
                            // 扫描成功
                            loginApp.showScanSucc();
                            break;
                        case 100012:
                        case 10002:
                            // 失效
                            loginApp.showScanErr();
                            break;
                        case 10003:
                            // 登录成功
                            if (res.data.forwardUrl) {
                                location.href = '${ctx}' + res.data.forwardUrl;
                            }
                            break;
                    }

                    var result = 10002 !== res.data.code && 100012 !== res.data.code && 10003 !== res.data.code;
                    if (!result) {
                        if (res.data.code === 10003 && res.data.forwardUrl) {
                            loginApp.clearInterval()
                        } else if (res.data.code !== 10003) {
                            loginApp.clearInterval();
                        }
                    }
                }
            })
        },
        showScanSucc: function () {
            $('#scan_stat').show()
            $('#scan_stat .scanning').show()
            $('#scan_stat .invalid').hide()
        },
        showScanErr: function () {
            $('#scan_stat').show()
            $('#scan_stat .scanning').hide()
            $('#scan_stat .invalid').show()
            loginApp.clearInterval()
        },
        clearInterval: function () {
            for (var i = 0; i < intervalArray.length; i++) {
                console.log(intervalArray[i])
                clearInterval(intervalArray[i]);
            }
        }
    }
    loginApp.bind()
    if (clickType != 'register_btn') {
        loginApp.makeQRCode()
    }
</script>
</body>
</html>